<style lang="scss" scoped>
	$mainColor: #179AFE;
	$borderColor: #e9e9e9;

	.com-no-data {
		margin-top: 2rem;
		text-align: center;
		font-size: .32rem;
		color: #999;
	}

	.com-fixed-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		padding: .2rem;
	}

	.content-body {
		padding-bottom: 2rem;

		.withdrawal-box {
			background-color: #fff;

			.title {
				padding: .2rem;
				font-size: .32rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.income {
					font-size: .24rem;
					color: $mainColor;
				}
			}

			.balance {
				text-align: center;
				padding: .3rem 0;
				font-size: .6rem;
				color: $mainColor;
			}

			.counts {
				display: flex;
				border-top: 1px solid $borderColor;
				border-bottom: 1px solid $borderColor;

				.count-item {
					flex: 1;
					text-align: center;
					padding: .2rem 0;

					&:not(:last-child) {
						border-right: 1px solid $borderColor;
					}

					.tit {
						margin-bottom: .2rem;
						color: #666;
					}

					.num {
						font-size: .32rem;
						color: $mainColor;
					}
				}
			}
		}

		.withdrawal-list {
			margin-top: .2rem;
			padding: 0 .2rem;
			background-color: #fff;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:not(:last-child) {
					border-bottom: 1px solid #e9e9e9;
				}

				.lb {
					padding: .2rem 0;

					.tit {
						font-size: .28rem;
						color: #333;
						margin-bottom: .1rem;
					}

					.date {
						font-size: .24rem;
						color: #999;
					}
				}

				.rb {
					color: #07c160;
					font-size: .3rem;
				}
			}
		}
	}
</style>
<template>
	<div class="container hasNav">
		<van-nav-bar title="我的收入" left-arrow left-text="返回" right-text="提现规则"
			@click-right="$router.push('/common/withdrawalRule')" @click-left="$router.back()" fixed>
		</van-nav-bar>

		<div class="content-body">
			<div class="withdrawal-box">
				<div class="title">
					账户余额 (元)
				</div>
				<div class="balance">{{balance}}</div>
				<div class="counts">
					<div class="count-item" @click="$router.push('/user/incomeList?type=1')">
						<div class="tit">累计收入 (元)</div>
						<div class="num">{{incomeTotal}}</div>
					</div>
					<div class="count-item" @click="$router.push('/user/incomeList?type=2')">
						<div class="tit">累计提现 (元)</div>
						<div class="num">{{withdrawalTotal}}</div>
					</div>
				</div>
			</div>

			<div class="withdrawal-list" v-if="withdrawalList.length">
				<div class="item" v-for="(item, index) in withdrawalList" :key="index">
					<div class="lb">
						<div class="tit">提现 {{item.withdrawalAmount}}</div>
						<div class="date">{{item.withdrawalDatetime}}</div>
					</div>
					<div class="rb">
						{{item.withdrawalStatus}}
					</div>
				</div>
			</div>

			<div class="com-no-data" v-else>您还没有提现记录</div>

		</div>

		<div class="com-fixed-btn">
			<van-button type="default" color="#179AFE" block @click="goWithdrawal">提现</van-button>
		</div>

	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import {
		getNewIncomeInfo,
		getBankAndAlipayInfo
	} from "../../api/user";

	export default {
		name: 'Income',
		data() {
			return {
				balance: 0.00,
				incomeTotal: 0.00,
				withdrawalTotal: 0.00,
				withdrawalList: []
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		mounted() {
			this.getNewIncomeInfo();
			this.getBankAndAlipayInfo();
		},
		methods: {
			async getNewIncomeInfo() {
				const data = await getNewIncomeInfo();
				this.balance = data.balance;
				this.incomeTotal = data.totalAmount;
				this.withdrawalTotal = data.withdrawalSuccess;
				this.withdrawalList = data.withdrawalList;
			},
			async getBankAndAlipayInfo() {
				const data = await getBankAndAlipayInfo();
			},
			goWithdrawal() {
				if (!!this.userInfo.alipayCardNumber || !!this.userInfo.bankCardNumber) {
					this.$router.push('/user/selectWithdrawalOrder')
				} else {
					this.$router.push('/user/card')
					this.$toast('请先添加银行卡或支付宝账户!')
				}
			}
		}
	};
</script>
